
.messages-content {
  background: #F9F9F9;
}

.message {
  margin-top: (10/@font-size-base)*1rem;
  width: 70%;
  .message-user {
    position: relative;
    height: (30/@font-size-base)*1rem;
    font-size: (14/@font-size-base)*1rem;
    line-height: (30/@font-size-base)*1rem;
    color: #5C5767;
    img {
      position: absolute;
      top: 0;
      display: inline-block;
      vertical-align: middle;
      width: (30/@font-size-base)*1rem;
      height: (30/@font-size-base)*1rem;
      border-radius: 100%;
    }
  }

  &.message-sent {
    .message-user {
      .justify-content(flex-end);
      padding-right: (40/@font-size-base)*1rem;
      img {
        left: auto;
        right: 0;
      }
    }
  }

  &.message-received {
    .message-user {
      .justify-content(flex-start);
      padding-left: (40/@font-size-base)*1rem;
      img {
        right: auto;
        left: 0;
      }
    }
  }

  .message-box {
    position: relative;
    .flexbox();
    width: 100%;
    margin-top: (5/@font-size-base)*1rem;
    box-sizing: border-box;
    .message-inner {
      .flexbox();
      width: 100%;
      box-sizing: border-box;
      padding: (10/@font-size-base)*1rem;
      background: @white;
      border: 1px solid #eee;
      border-radius: (4/@font-size-base)*1rem;

      img {
        width:100%;
        height: auto;
      }
    }
  }

  &.message-sent {
   .message-box {
     padding-right: (30/@font-size-base)*1rem;
     .message-inner {
       background: #F7EDFE;
       color: #453F52;
     }
   }
  }

  &.message-received {
    .message-box {

      padding-left: (30/@font-size-base)*1rem;
    }
  }
}

.messagebar {

  .icon-file {
    display: inline-block;
    vertical-align: middle;
    width: (18/@font-size-base)*1rem;
    height: (18/@font-size-base)*1rem;
    margin-right: 10px;
    background: url("../../images/msg_file.png") no-repeat;
    background-size: cover;
  }
  input[type="file"] {
    display: none;
  }
}